<template>
  <div class="demand combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">需求中心</h2>
      </div>
      <div class="content">
        <h4>请选择您需要筛选的条件：</h4>
        <div class="form-wrap">
          <m-form
            class="form"
            ref="form"
            :model="formData"
            :inline="true"
            label-width="120px"
            label-position="right"
          >
            <m-form-item label="产品类型：" prop="type">
              <m-select
                :options="goods_typeOptions"
                v-model="formData.goods_type"
                type="grey"
                width="150"
              />
            </m-form-item>
            <m-form-item label="一级分类：" prop="classification1">
              <m-select
                :options="proCategory1"
                v-model="formData.goods_class_1"
                placeholder="不限"
                type="grey"
                width="150"
              />
            </m-form-item>
            <m-form-item label="二级分类：" prop="classification2">
              <m-select
                :options="proCategory2"
                v-model="formData.goods_class_2"
                type="grey"
                placeholder="不限"
                width="150"
              />
            </m-form-item>
            <m-form-item label="目的地-国家：" prop="country">
              <m-select
                :options="countryOptions"
                v-model="formData.country"
                placeholder="不限"
                type="grey"
                width="150"
              />
            </m-form-item>
            <m-form-item label="目的地-省/州：" prop="province">
              <v-distpicker
                class="addressChoose"
                @province="onChangeProvince"
                :province="formData.province"
                placeholder="不限"
                only-province
                :placeholders="placeholders"
              />
            </m-form-item>
            <m-form-item label="状态：" prop="status">
              <m-select
                :options="statusOptions"
                v-model="formData.status"
                placeholder="不限"
                type="grey"
                width="150"
              />
            </m-form-item>
            <m-form-item label="发布时间：" prop="time" class="timeItem">
              <m-select
                :options="timeOptions"
                v-model="formData.time"
                placeholder="不限"
                type="grey"
                width="150"
              />
            </m-form-item>
            <m-form-item class="btnBox">
              <div class="flexBox">
                <m-button
                  class="resetbtn"
                  width="110"
                  type="bordered"
                  style="margin-right: 15px"
                  @click="reset"
                  >重置
                </m-button>
                <m-button width="110" @click="getList()">筛选</m-button>
              </div>
            </m-form-item>
          </m-form>
          <div class="dividing" @click="$router.push('/require/1')">
            <p>发布需求></p>
            <img src="~/assets/images/to-require.jpg" alt="">
          </div>
        </div>
        <div class="list-wrap">
          <div class="item" v-for="(item, index) in list" :key="index">
            <img :src="item.img_list[0] || noPic" alt="" v-if="item.img_list[0] !== 'undefined'" />
            <img :src="noPic" alt="" v-else>
            <div class="texts-area">
              <div class="name">{{ item.goods_info }}</div>
              <div class="type">
                产品分类：{{ item.class2 &&item.class2.cate_name }}>{{
                  item.class1 &&item.class1.cate_name
                }}
              </div>
              <div class="count">产品数量：{{ item.goods_num }} {{ item.goods_unit == 0 ? '个' : item.goods_unit == 1 ? '件' : 'pcs'}}</div>
              <div class="price">期望单价：{{ item.goods_price }}元</div>
              <div class="destination">
                目的地：{{ item.province }}{{ item.city }}{{ item.address }}
              </div>
              <div class="date">{{ item.create_time }} 发布</div>
            </div>
            <div class="status-area">
              <div v-if="item.status == 0" class="status processing">
                进行中
              </div>
              <div
                v-else-if="item.status == 1"
                class="status expiring"
              >
                将到期
              </div>
              <div
                v-else-if="item.status == 2"
                class="status finished"
              >
                已结束
              </div>
              <m-button
                class="btn"
                width="80"
                height="35"
                @click="response(item)"
                >立即响应</m-button
              >
            </div>
          </div>
          <nodata message="暂时没有需求" :status="listStatus"></nodata>
          <div style="padding: 0 15px" class="pages">
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
        </div>
      </div>
    </div>

    <m-dialog class="dialog" :show-dialog.sync="showDialog1" title="平台提示">
      <div class="dialog-content">请升级成为会员卖家访问详情。</div>
      <div class="btns">
        <m-button type="dark" width="180" @click="cancel">取消</m-button>
        <m-button width="180" @click="$router.push('/profile/account-setting/vip-benefits')">
          升级会员卖家
        </m-button>
      </div>
    </m-dialog>

    <m-dialog class="dialog" :show-dialog.sync="showDialog2" title="平台提示">
      <div class="dialog-content">请访问商家后台查看需求详情。</div>
      <div class="btns">
        <m-button type="dark" width="180" @click="cancel">取消</m-button>
        <a href="http://www.pack-mate.com/merchant/login" target="_blank">
          <m-button width="180">进入查看</m-button>
        </a>
      </div>
    </m-dialog>

    <m-dialog class="dialog" :show-dialog.sync="showDialog3" title="平台提示">
      <div class="dialog-content">请注册成为会员卖家访问详情。</div>
      <div class="btns">
        <m-button type="dark" width="180" @click="cancel">取消</m-button>
        <m-button width="180" @click="$router.push('/home/businessSettlement')">注册卖家</m-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm";
import MFormItem from "@/components/common/m-form/MFormItem";
import MSelect from "@/components/common/m-select/MSelect";
import MButton from "@/components/common/m-button/MButton";
import MPagination from "@/components/common/m-pagination/MPagination";
import MDialog from "@/components/common/m-dialog/MDialog";
import { getDemandsList, getProductsCategory } from "@/request/api";

export default {
  name: "Demand",
  components: { MDialog, MPagination, MButton, MSelect, MFormItem, MForm },
  data() {
    return {
      showDialog1: false,
      showDialog2: false,
      showDialog3: false,
      formData: {
        goods_type: "1",
        goods_class_1: "",
        goods_class_2: "",
        status: "0",
        time: "0"
      },
      goods_typeOptions: [
        { label: "包装材料", value: "1" },
        { label: "配套服务", value: "0" }
      ],
      proCategory1: [],
      proCategory2: [],
      countryOptions: [{ label: "中国", value: "中国" }],
      statusOptions: [
        { label: "全部", value: "0" },
        { label: "进行中", value: "1" },
        { label: "将到期", value: "2" },
        { label: "已结束", value: "3" }
      ],
      timeOptions: [
        { label: "不限", value: "0" },
        { label: "今天", value: "1" },
        { label: "七天", value: "7" },
        { label: "一个月", value: "30" }
      ],
      listStatus: 1,
      page: 1,
      total: 1,
      noPic: require("assets/images/nopic.jpg"),
      limit: 20,
      list: [],
      placeholders: { province: "不限" }
    };
  },
  filters: {
    statusText(status) {
      return {
        0: "已结束",
        1: "进行中",
        2: "将到期"
      }[status];
    }
  },
  watch: {
    "formData.goods_type": {
      handler: function() {
        this.formData.goods_class_2 = "";
        this.getProCategory(this.formData.goods_type);
      }
    }
  },
  created() {
    this.getList();
    this.getProCategory();
  },
  methods: {
    /** 选择省市区 */
    onChangeProvince(e) {
      if (e.value === "不限") {
        this.formData.province = "";
      } else {
        this.formData.province = e.value;
      }
    },
    // 获取需求列表
    getList() {
      this.listStatus = 1;
      let data = {
        page: this.page,
        limit: this.limit,
        data: {
          demand_type: 0,
          ...this.formData
        }
      };
      getDemandsList(data)
        .then(res => {
          this.list = res.data.data;
          this.total = res.data.total;
          if (this.total === 0) {
            this.listStatus = 0;
          } else {
            this.listStatus = 2;
          }
          window.scrollTo({ top: 0 });
        })
        .catch(err => {
          this.$$message.error(err.message);
        });
    },
    getProCategory(id=0) {
      console.log(id);
      let that = this;
      let data = {
        is_entity: that.formData.goods_type || 1,
        page: 1,
        limit: 0,
        pid: id || 0,
      };
      getProductsCategory(data).then(res => {
        if(res.status === 200) {
          that.proCategory1 = [];
          for (let i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            };
            that.proCategory1.push(tem);
          }
        } else {
          this.$message.error(res.message)
        }
        // TODO 没有二级分类
        /* if (id === 0) {
          that.proCategory1 = [];
          for (let i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            };
            that.proCategory1.push(tem);
          }
        } else {
          that.proCategory2 = [];
          for (let i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            };
            that.proCategory2.push(tem);
          }
        } */
      });
    },
    reset() {
      this.formData = {
        goods_type: "1",
        goods_class_1: "",
        goods_class_2: "",
        status: "0",
        time: "0"
      };
      this.getList();
    },
    response(item) {
      if (item.status === 0) {
        this.showDialog2 = true;
      } else if (item.status === 1) {
        this.showDialog1 = true;
      } else if (item.status === 2) {
        this.showDialog3 = true;
      }
    },
    cancel() {
      this.showDialog1 = false;
      this.showDialog2 = false;
      this.showDialog3 = false;
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

/deep/ .distpicker-address-wrapper select {
  width: 150px;
  height: 45px;
  background-color: #f3f4f6;
  border: solid 1px #eaeaea;
  border-radius: 10px;
  color: #606266;
  position: relative;
}

.distpicker-address-wrapper::after {
  font-family: element-icons !important;
  content: "\e6e1";
  height: calc(100% - 2px);
  width: 25px;
  text-align: center;
  background: #f3f4f6;
  position: absolute;
  right: 0;
  top: 1px;
  border-radius: 10px;
  color: #c0c4cc;
  transform: rotate(180deg);
}

/deep/ .resetbtn .el-button {
  border: 1px solid #969696 !important;
  color: #666666 !important;
  background: #fff !important;
}

.demand {
  padding: 60px 0 60px 0;

  .content {
    width: 100%;
    padding: 45px 50px;
    color: #656565;
    background: #fff;
    margin-top: 30px;
    font-size: 16px;

    .form-wrap {
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      position: relative;

      .form {
        // width: 100%;
        width: 77%;
        .btnBox {
          display: block;
          margin-left: 30px;
        }
      }
      .dividing {
        width: 23%;
        height: 110px;
        padding-left: 20px;
        border-left: 1px solid #e2e2e2;
        position: relative;
        cursor: pointer;
        img {
          width: 250px;
          height: 100px;
        }
        p {
          position: absolute;
          top: 30%;
          left: 41%;
          width: 117px;
          height: 35px;
          border-radius: 10px;
          background: #E48B2C;
          text-align: center;
          line-height: 35px;
          color: #fff;
        }
      }
    }

    .list-wrap {
      .item {
        width: 515px;
        height: 200px;
        padding: 10px;
        border: solid 1px #eaeaea;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        margin: 15px;

        img {
          width: 190px;
          height: 180px;
        }

        .texts-area {
          margin-left: 10px;
          width: 220px;
          height: 180px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 13px;

          .name {
            font-size: 15px;
            margin-bottom: 10px;
          }
        }

        .status-area {
          padding: 10px 0;
          width: 80px;
          height: 180px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .status {
            width: 45px;
            height: 45px;
            border-radius: 65px;
            text-align: center;
            line-height: 45px;
            color: #fff;
            box-sizing: content-box;
            border-style: solid;
            border-width: 10px;
            font-size: 12px;

            &.processing {
              background-color: rgb(0, 133, 232);
              border-color: rgb(102, 182, 241);
            }

            &.finished {
              background-color: rgb(102, 102, 102);
              border-color: rgb(163, 163, 163);
            }

            &.expiring {
              background-color: $theme-color-1;
              border-color: rgb(239, 185, 128);
            }
          }
        }
      }
    }
  }

  .dialog {
    .dialog-content {
      height: 150px;
      text-align: center;
      line-height: 150px;
      font-size: 16px;
      margin-bottom: 15px;
    }

    .btns {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
